<!-- 新增假期类型弹出框 -->
<template>
  <a-modal
    width="50%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    draggable
    title-align="center"
    unmount-on-close
  >
    <template #title>
      <div>{{ props.data?.id ? '编辑假期类型' : '新增假期类型' }}</div>
    </template>
    <a-form :model="formData.data" :rules="rules" ref="refForm">
      <a-form-item label="假期名称" field="name" show-colon>
        <a-input v-model.trim="formData.data.name"></a-input>
      </a-form-item>
      <a-form-item label="假期描述" field="describe" show-colon>
        <a-textarea
          :max-length="300"
          show-word-limit
          :auto-size="{
            minRows: 3
          }"
          v-model="formData.data.describe"
        ></a-textarea>
      </a-form-item>
      <!-- <a-form-item label="假期单位" field="unit" show-colon>
        <a-select v-model="formData.data.unit">
          <a-option :value="1">天</a-option>
          <a-option :value="2">时</a-option>
        </a-select>
      </a-form-item> -->
      <a-form-item label="是否启用" field="status" show-colon>
        <a-switch
          v-model="formData.data.status"
          :checked-value="1"
          :unchecked-value="2"
        />
      </a-form-item>
      <!-- <a-form-item label="假期余额" field="balanceStatus" show-colon>
        <a-switch
          v-model="formData.data.balanceStatus"
          :checked-value="1"
          :unchecked-value="2"
        />
      </a-form-item>
      <a-form-item label="假期颜色" field="colour" show-colon>-->
      <!-- 颜色选择器 -->
      <!-- <input type="color" v-model="formData.data.colour" />
      </a-form-item>  -->
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import { CheckHolidayType } from '@/apis/management/attendance/baseSetting';

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    data: any; // 表单数据
  }>(),
  {
    visible: false
  }
);

const emit = defineEmits(['update:visible', 'holidayTypeAdd']);

let refForm = ref();

const formData: any = reactive({
  data: {
    name: '', // 假期名称
    describe: '', // 假期描述
    unit: 1, // 假期单位
    status: 1, // 是否启用
    balanceStatusStatus: 1, // 假期余额
    colour: '#000000' // 假期颜色
  }
});

// 名称查重函数
const validateName = async (name: string, cb: any) => {
  try {
    if (name === props.data?.name && props.data?.id) {
      //
    } else {
      const data = {
        name
      };
      const res = await CheckHolidayType(data);
      if (res.code) {
        cb(`${res.msg}`);
      }
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

// 颜色查重函数
const validateColor = async (colour: string, cb: any) => {
  try {
    if (colour === props.data?.colour && props.data?.id) {
      //
    } else {
      const data = {
        colour
      };
      const res = await CheckHolidayType(data);
      if (res.code) {
        cb(`${res.msg}`);
      }
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

// 表单校验
const rules = {
  name: [
    {
      required: true,
      message: '请输入假期名称'
    },
    {
      validator: validateName
    }
  ],
  colour: [
    {
      required: true,
      message: '请输入填写颜色'
    },
    {
      validator: validateColor
    }
  ]
};

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      if (props.data?.id) {
        formData.data = cloneDeep(props.data);
      } else {
        // 初始化formData.data里面的值
        formData.data = {
          name: '', // 假期名称
          describe: '', // 假期描述
          unit: 1, // 假期单位
          status: 1, // 是否启用
          balanceStatus: 1, // 假期余额
          colour: '#000000' // 假期颜色
        };
      }
    }
  }
);
// 获取表单数据
const getData = () => {
  try {
    //
  } catch (error: unknown) {
    console.log(error);
  }
};

// 保存
const handleOk = async () => {
  if (await refForm.value.validate()) return;
  emit('update:visible', false);
  emit('holidayTypeAdd', formData.data);
};

// 取消
const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<style scoped lang="less"></style>
